<template>
    <div class="py-5 w-4/5 mx-auto">
        <div v-for="(project, index) in projects" :key="project.id" class="relative">
            <div
                class="mb-4 bg-purple-900/30 backdrop-blur-md rounded-xl border border-white/20 shadow-lg hover:border-white/40 transition-all duration-300 overflow-hidden">
                <div class="grid grid-cols-1 md:grid-cols-2" :class="{ 'md:grid-flow-col-dense': isEven(index) }">
                    <!-- 项目图片 -->
                    <div class="relative" :class="isEven(index) ? 'md:order-2' : 'md:order-1'">
                        <!-- 图片容器 -->
                        <div class="relative h-full">
                            <!-- 内部边框装饰 -->
                            <div class="absolute inset-4 border border-white/10 rounded-lg z-10"></div>

                            <!-- 图片 -->
                            <div class="h-64 md:h-full relative overflow-hidden">
                                <img :src="project.image || '/bg2.jpg'" :alt="`${project.title}截图`"
                                    class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105" />

                                <!-- 渐变叠加层 -->
                                <div class="absolute inset-0" :class="isEven(index)
                                    ? 'bg-gradient-to-l from-purple-900/70 to-transparent'
                                    : 'bg-gradient-to-r from-purple-900/70 to-transparent'">
                                </div>

                                <div
                                    class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-white/30 rounded-tl-lg">
                                </div>
                                <div
                                    class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-white/30 rounded-br-lg">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 项目信息 -->
                    <div class="p-8 md:p-10 flex flex-col justify-center"
                        :class="isEven(index) ? 'md:order-1' : 'md:order-2'">
                        <h2 class="text-2xl md:text-3xl font-bold text-white mb-4">{{ project.title }}</h2>
                        <p class="text-white/90 mb-6 leading-relaxed text-lg">{{ project.description }}</p>

                        <!-- 技术标签 -->
                        <div class="flex flex-wrap gap-2 mb-6 ">
                            <span v-for="(tag, i) in project.tags" :key="i"
                                class="px-3 py-1 bg-purple-800/50  text-[#fff] text-sm rounded-full border border-purple-500/30">
                                {{ tag }}
                            </span>
                        </div>

                        <!-- 项目链接 -->
                        <div class="flex flex-wrap gap-4 text-sm">
                            <!-- <div
                                class="px-5 py-2 bg-white/90 text-purple-900 rounded-lg font-medium hover:bg-white transition-colors text-sm shadow-md hover:cursor-pointer">
                                查看详情
                            </div> -->
                            <el-tooltip class="box-item" effect="light" content="这是一个私有项目，暂不开放访问" :disabled="!project.private"
                                placement="right">
                                <div v-if="project.githubUrl" :href="project.githubUrl"
                                    @click="open(project.githubUrl, project.private)"
                                    :class="project.private ? 'cursor-not-allowed ' : 'cursor-pointer'"
                                    class="px-5 py-2 bg-purple-600/50 text-white rounded-lg font-medium hover:bg-purple-600/70 transition-colors text-sm flex items-center gap-2 shadow-md">
                                    <img src="/github.svg" alt="github" class="w-4 h-4">
                                    源代码
                                </div>
                            </el-tooltip>

                        </div>
                    </div>
                </div>
            </div>


        </div>


    </div>
</template>

<script setup>
//  const { data } = useAsyncData('projects', () => $fetch('/api/projects'))
// const { data } = await useFetch('https://saas.btitib.com/api/basic-service/v1/kapi/app/8e71c211f9c7a4fa4371aa3f04a7f000/logic/5cb367f5452342a9b68d7f2a1a11d858/custom_d69h0',{
//     method: 'POST',
//     headers: {
//         'Content-Type': 'application/json',
//         'Authorization':'Bearer sk-uk3VBpqUtaLwCF5wLZDKiGEsan8zYRAT'
//     },
//     body:{
//         id:'fe7f7f81886117080188613f68e10009',
//         pageNo:1,
//         pageSize:10,
//         state:0
//     }
// })
//  const { data } = await useFetch('http://106.53.29.159:8788/v1/site_ugc/article/list', {
//     key: 'article-list',
//         method: 'post',
//         body: {
//           is_publish: 1,
//           page: 1,
//           size: 18,
//           // state: 0,
//           is_show: 1,
//           sorted_field: "read_count",
//           sorted_dir: -1
//         },
//         headers: {
//           'Content-Type': 'application/json',
//         }
//       })
const open = (url, pri) => {
    if (!pri) {
        window.open(url, '_blank');
    }
}
const isEven = (index) => {
    return index % 2 === 1;
}
const projects = [
    {
        id: 1,
        title: "家教预约平台",
        description:
            "一个通过个性化标签和评分系统帮助学生快速找到适合自己的家教预约平台",
        image: "https://mp-af7fce00-5123-404b-a663-efef7a2e5985.cdn.bspapp.com/project/jiajiao/jiajiaoA.png",
        tags: ["uniapp", "uniCloud", "Vue3", "微信小程序", "H5", "APP"],
        githubUrl: "https://gitee.com/rivenplayer/jiajiao.git",
        private: false
    },
    {
        id: 2,
        title: "Pepehola",
        description:
            "一款帮助主人更好地照看自己宠物",
        image: "/bg2.jpg",
        tags: ["Next.js", "React", "TailwindCSS", "Markdown", "Prisma"],
        githubUrl: "https://github.com/example/blog",
        private: true
    },
    {
        id: 3,
        title: "出粽监督",
        description:
            "一款为了帮助用户更好地自律和监督自己完成任务的应用，用户可以创建任务、设置提醒、记录进度，并通过数据分析了解自己的习惯和效率。",
        image: "/bg2.jpg",
        tags: ["uniapp", "uniCloud", "Vue2", "VueX"],
        githubUrl: "https://github.com/example/ecommerce",
        private: true
    },
]
</script>
<style scoped></style>